<template>
    <div style="display: flex;">
<!--        <a-select v-if="!userInfo.provinceCode" style="width: 150px" labelInValue @change="handleProvinceChange">-->
<!--            <a-select-option v-for="(item,index) in provinceData" :key="index" :value="item['value']" >-->
<!--                {{ item['label'] }}-->
<!--            </a-select-option>-->
<!--        </a-select>-->
        <a-select v-if="!userInfo.cityCode" v-model="cities" style="width: 100%;min-width: 100px" @change="handleCityChange" labelInValue placeholder="城市">
            <a-select-option v-for="(item,index) in cityData" :key="index" :value="item['value']">
                {{ item['label'] }}
            </a-select-option>
        </a-select>
        <a-select v-if="!userInfo.areaCode" v-model="areas" style="width: 100%;min-width: 100px;margin-left: 5px;" @change="handleAreaChange" labelInValue placeholder="区域">
            <a-select-option v-for="(item,index)  in areaData" :key="index" :value="item['value']">
                {{ item['label'] }}
            </a-select-option>
        </a-select>
    </div>

</template>


<script>
    import { forEachData } from '../../utils/areaData'
    export default {
        data() {
            // 贵州省
            const provinceData = forEachData();
            // 贵州省下的9个市/州
            let cityData = [];
            if(provinceData[0]){
                cityData = forEachData(provinceData[0]['value']);
            }
            // 贵阳市下的10个区/县
            let areaData = [];
            if(cityData[0]){
                areaData = forEachData(cityData[0]['value']);
            }
            return {
                userInfo : {
                    provinceCode : null,
                    cityCode : null,
                    areaCode : null,
                },
                provinceData,
                cityData,
                areaData,
                cities : '', // 选中的城市
                areas : '', // 选中的区域
                form : {
                    province : '',
                    city : '',
                    area : '',
                }
            }
        },
        created() {
            // 获取到用户登陆的信息
            let info = this.$store.getters.userInfo;
            // 如果用户有provinceCode，则赋值便查询出该区域下的市信息
            if(info.provinceCode){
                this.userInfo.provinceCode = info.provinceCode;
                // 城市信息
                this.cityData = forEachData(info.provinceCode);
            }
            // 如果用户有cityCode，则赋值便查询出该区域下的区/县信息
            if(info.cityCode){
                this.userInfo.cityCode = info.cityCode;
                // 区/县信息
                this.areaData = forEachData(info.cityCode);
            }
            // 如果用户有areaCode，则赋值
            if(info.areaCode){
                this.userInfo.areaCode = info.areaCode;
            }
        },
        methods: {
            // 清空选择的区域
            clearSelectArea(){
                this.cities = '';
                this.areas = '';
                this.form.province = '';
                this.form.city = '';
                this.form.area = '';
            },
            handleProvinceChange(result) {
                this.form.province = result['key'];
                this.form.city = '';
                this.form.area = '';
                this.cityData = forEachData(result['key']);
                if(this.cityData[0]){
                    this.areaData = forEachData(this.cityData[0]['key']);
                }
                this.changeData();
            },
            // 选择城市
            handleCityChange(result) {
                this.cities = result;
                this.areas = '';
                this.form.city = result['key'];
                this.form.area = '';
                // 根据选中的市编码查询出该区域下的区/县信息
                this.areaData = forEachData(result['key']);
                this.changeData();
            },
            // 选择区/县
            handleAreaChange(result) {
                this.areas = result;
                this.form.area = result['key'];
                this.changeData();
            },
            // 向父组件进行传值
            changeData : function() {
                this.$emit('change',this.form)
            }
        },
    }
</script>

<style scoped>
    .components-input-demo-presuffix .anticon-close-circle {
        cursor: pointer;
        color: #ccc;
        transition: color 0.3s;
        font-size: 12px;
    }

    .components-input-demo-presuffix .anticon-close-circle:hover {
        color: #f5222d;
    }

    .components-input-demo-presuffix .anticon-close-circle:active {
        color: #666;
    }
</style>
